// import React, { Component } from 'react'

// export default class Counter extends Component {
//     constructor(props) {
//         super(props);
//         this.state = {
//             counter: 0
//         }
//     }
//   render() {
//     return (
//       <div>
//           <h2>当前计数: { this.state.counter}</h2>
//           <button onClick={ e=> this.increment() }> +1 </button>
//           <button onClick={ e=> this.decrement() }> -1 </button>
//       </div>
//     )
//   }
//   increment () {
//       this.setState({
//           counter: this.state.counter + 1
//       })
//   }
//   decrement () {
//       this.setState({
//           counter: this.state.counter - 1
//       })
//   }
// }
// export default Counter

// 使用React Hooks
import React, {useState,useEffect } from 'react'
function CounterHook () {
     //1.参数初始化值，可以是任意类型，不设置为undefined
    //2.返回值：数组，通常通过数组解构赋值来获取这两个元素（当前状态的值， 设置状态值的函数）
    const [counter, setCounter] = useState(0);
    const [age, setAge] = useState(18);
    const [date, setDate] = useState(new Date());
    // 1.接受两个参数（回调函数， 依赖数组）
    // 2.每次 render 后执行：不提供第二个依赖项参数。比如：useEffect(() => {})；
    // 3.组件 Mount 后执行：提供一个空数组作为依赖项。比如：useEffect(() => {}, [])；
    // 4.第一次以及依赖项发生变化后执行：提供依赖项数组。比如：useEffect(() => {}, [deps])；
    // 5.组件 unmount 后执行：返回一个回调函数。比如：useEffect() => { return () => {} }, [])。
    useEffect (() => {
        console.log(date);
        const timer = setInterval( ()=> {
            setDate(new Date());
        },1000);
        return () => clearInterval(timer); //允许返回一个方法，用于组件销毁时做一些清理操作
    },[date])
   
    return(
        <div>
            <h2>当前时间: {date.toDateString()}</h2>
            <h2>当前计数: {counter}</h2>
            <button onClick={e =>setCounter(counter+1)} > + 1 </button>
            <button onClick={e =>setCounter(counter-1)} > - 1 </button>
            <h2>我{age}岁了</h2>
            <button onClick={() =>setAge(age+1)} > + 1 </button>
            <button onClick={() =>setAge(age-1)} > - 1 </button>
        </div>
    )
}
export default CounterHook